<template>
	<view class="detail-container">
		<!-- 页面标题 -->
		<view class="page-header">
			<text class="page-title">生命周期详情页</text>
			<text class="subtitle">页面跳转生命周期演示</text>
		</view>

		<!-- 生命周期日志区域 -->
		<view class="log-container">
			<view class="log-title">生命周期触发日志</view>
			<scroll-view scroll-y class="log-list">
				<view v-for="(log, index) in lifecycleLogs" :key="index" class="log-item">
					<text class="log-time">{{log.time}}</text>
					<text class="log-content">{{log.content}}</text>
				</view>
			</scroll-view>
		</view>

		<!-- 页面参数展示 -->
		<view class="params-section">
			<text class="section-title">页面参数</text>
			<view class="params-content">
				<text v-if="Object.keys(pageParams).length === 0" class="no-params">无参数</text>
				<view v-else v-for="(value, key) in pageParams" :key="key" class="param-item">
					<text class="param-key">{{key}}:</text>
					<text class="param-value">{{value}}</text>
				</view>
			</view>
		</view>

		<!-- 页面交互按钮 -->
		<view class="action-buttons">
			<button class="btn" @tap="navigateBack">返回上一页</button>
			<button class="btn" @tap="reloadPage" type="primary">重新加载页面</button>
			<button class="btn" @tap="navigateToOtherPage" type="default">跳转到其他页面</button>
		</view>

		<!-- 生命周期说明 -->
		<view class="lifecycle-info">
			<text class="info-title">生命周期说明</text>
			<text class="info-content">当点击"返回上一页"按钮时，本页面将触发onHide生命周期，而上一页将触发onShow生命周期。</text>
			<text class="info-content">通过观察控制台日志，可以清晰地看到页面切换过程中各个生命周期函数的触发顺序。</text>
		</view>
	</view>
</template>

<script>
	export default {
		// 页面数据
		data() {
			return {
				title: '生命周期详情页',
				lifecycleLogs: [],
				pageParams: {},
				pageData: {
					loadedTime: '',
					detailInfo: '这是详情页的详细信息'
				}
			}
		},

		// 页面加载时触发（只触发一次）
		onLoad(options) {
			this.addLog('📱 页面加载 (onLoad) - 页面参数: ' + JSON.stringify(options));
			// 保存页面参数
			this.pageParams = options || {};
			// 初始化页面数据
			this.initPageData();
		},

		// 页面显示时触发（每次显示都会触发）
		onShow() {
			this.addLog('👁️ 页面显示 (onShow) - 页面进入前台');
			// 可以在这里刷新数据或执行需要在页面显示时进行的操作
		},

		// 页面初次渲染完成时触发（只触发一次）
		onReady() {
			this.addLog('✅ 页面渲染完成 (onReady) - 可以与页面交互');
			// 可以在这里进行DOM操作
		},

		// 页面隐藏时触发
		onHide() {
			this.addLog('🙈 页面隐藏 (onHide) - 页面进入后台');
			// 可以在这里暂停一些不必要的操作
		},

		// 页面卸载时触发
		onUnload() {
			this.addLog('🗑️ 页面卸载 (onUnload) - 页面被销毁');
			// 可以在这里清理资源、取消订阅等
		},

		// 下拉刷新时触发
		onPullDownRefresh() {
			this.addLog('🔄 下拉刷新 (onPullDownRefresh)');
			// 模拟数据刷新
			setTimeout(() => {
				this.reloadPageData();
				uni.stopPullDownRefresh();
			}, 1500);
		},

		// 上拉触底时触发
		onReachBottom() {
			this.addLog('📜 上拉触底 (onReachBottom)');
			// 可以在这里加载更多数据
		},

		// 页面尺寸变化时触发
		onResize(size) {
			this.addLog('📏 页面尺寸变化 (onResize) - ' + JSON.stringify(size));
		},

		// 页面滚动时触发
		onPageScroll(e) {
			// 为了避免日志过多，这里不添加滚动日志
			// console.log('页面滚动:', e.scrollTop);
		},

		// 分享时触发
		onShareAppMessage() {
			this.addLog('📤 分享 (onShareAppMessage)');
			return {
				title: 'Uniapp 生命周期详情页',
				path: '/pages/lifecycle-detail/lifecycle-detail'
			};
		},

		// 页面方法
		methods: {
			// 添加日志
			addLog(content) {
				const now = new Date();
				const timeStr = now.getHours() + ':' + 
					String(now.getMinutes()).padStart(2, '0') + ':' + 
					String(now.getSeconds()).padStart(2, '0');
				this.lifecycleLogs.push({
					time: timeStr,
					content: content
				});
				console.log(content);
			},

			// 初始化页面数据
			initPageData() {
				this.pageData.loadedTime = new Date().toLocaleString();
				this.addLog('📊 页面数据初始化完成');
			},

			// 重新加载页面数据
			reloadPageData() {
				this.addLog('🔄 开始重新加载页面数据');
				// 模拟网络请求延迟
				setTimeout(() => {
					this.pageData.loadedTime = new Date().toLocaleString();
					this.addLog('✅ 页面数据重新加载完成');
				}, 1000);
			},

			// 返回上一页
			navigateBack() {
				this.addLog('🔙 准备返回上一页');
				// 返回上一页，触发当前页面的onHide和上一页的onShow
				uni.navigateBack({
					delta: 1
				});
			},

			// 重新加载页面
			reloadPage() {
				this.addLog('🔄 准备重新加载页面');
				// 使用redirectTo重新加载当前页面，会触发onUnload和onLoad
				uni.redirectTo({
					url: '/pages/lifecycle-detail/lifecycle-detail'
				});
			},

			// 跳转到其他页面（演示用）
			navigateToOtherPage() {
				this.addLog('🚀 准备跳转到其他页面');
				// 这里只是演示，可以根据实际需求跳转到其他页面
				uni.showToast({
					title: '演示跳转功能',
					icon: 'none'
				});
			}
		}
	}
</script>

<style>
	.detail-container {
		padding: 30rpx;
	}

	.page-header {
		text-align: center;
		margin-bottom: 30rpx;
	}

	.page-title {
		font-size: 44rpx;
		font-weight: bold;
		color: #333;
	}

	.subtitle {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-top: 10rpx;
	}

	.log-container {
		background: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 30rpx;
	}

	.log-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 15rpx;
		color: #333;
	}

	.log-list {
		height: 300rpx;
		background: #f9f9f9;
		border-radius: 8rpx;
		padding: 15rpx;
	}

	.log-item {
		display: flex;
		margin-bottom: 10rpx;
		padding: 8rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.log-time {
		font-size: 24rpx;
		color: #999;
		margin-right: 15rpx;
		width: 120rpx;
	}

	.log-content {
		font-size: 26rpx;
		color: #333;
		flex: 1;
	}

	.params-section {
		background: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 15rpx;
		color: #333;
	}

	.params-content {
		background: #f9f9f9;
		border-radius: 8rpx;
		padding: 15rpx;
	}

	.no-params {
		font-size: 28rpx;
		color: #999;
		text-align: center;
		display: block;
	}

	.param-item {
		display: flex;
		margin-bottom: 10rpx;
		padding: 8rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.param-key {
		font-size: 26rpx;
		color: #666;
		margin-right: 10rpx;
		width: 120rpx;
	}

	.param-value {
		font-size: 26rpx;
		color: #333;
		flex: 1;
	}

	.action-buttons {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		margin-bottom: 30rpx;
	}

	.btn {
		font-size: 30rpx;
	}

	.lifecycle-info {
		background: #f0f7ff;
		border-radius: 10rpx;
		padding: 20rpx;
		border-left: 6rpx solid #007aff;
	}

	.info-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 15rpx;
		color: #007aff;
	}

	.info-content {
		font-size: 28rpx;
		color: #666;
		display: block;
		margin-bottom: 10rpx;
		line-height: 1.5;
	}
</style>